<template>
	<div class="app-container">
		<el-row :gutter="20">
			<!--设备数据-->
			<el-col :span="24" :xs="24">
				<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
					label-width="68px">
					<el-form-item label="设备" prop="device">
						<el-select v-model="queryParams.type" placeholder="设备类型" clearable style="width: 240px">
							<el-option v-for="item in types" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="状态" prop="status">
						<el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
							<el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
					</el-form-item>
				</el-form>

				<el-row :gutter="10" class="mb8">
					<el-col :span="1.5">
						<el-button type="primary" plain icon="el-icon-plus" size="mini"
							@click="handleAdd">绑定</el-button>
					</el-col>

					<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"
						:columns="columns"></right-toolbar>
				</el-row>

				<el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
					<!-- <el-table-column type="selection" width="50" align="center"/> -->

					<!-- 遍历 clumns 定义列 -->
					<el-table-column v-for="column in columns" :key="column.key" :label="column.label"
						:prop="column.prop" align="center" v-if="column.visible" :show-overflow-tooltip="true"
						:sortable="column.sortable">
						<!-- 使用 slot-scope 来根据列类型进行不同的处理 -->
						<template slot-scope="scope">
							<template v-if="column.prop === 'status'"> <!-- 特殊处理状态列 -->
								<el-button size="small" :type="statusMap.type[scope.row.status]">
									{{ statusMap.status[scope.row.status] }}
								</el-button>
							</template>
							<template v-else> <!-- 常规处理其他列 -->
								{{ scope.row[column.prop] }}
							</template>
						</template>
					</el-table-column>

					<el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
						<template slot-scope="scope" v-if="scope.row.userId !== 1">
							<el-button size="mini" type="primary" icon="el-icon-edit"
								@click="handleModify(scope.row)">修改</el-button>
							<!-- v-hasPermi="['system:user:edit']" -->
							<el-button size="mini" type="danger" icon="el-icon-delete"
								@click="handleDelete(scope.row)">解绑</el-button>
							<!-- v-hasPermi="['system:user:remove']" -->
						</template>
					</el-table-column>
				</el-table>

				<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
					:limit.sync="queryParams.pageSize" @pagination="getList" />
				<!-- @pagination="getList" -->
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import {
		getToken
	} from "@/utils/auth";
	import Treeselect from "@riophae/vue-treeselect";
	import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	import {
		getList,
		unbind
	} from "@/api/device/device";


	// 引入JOSN结构
	import {
		statusMap,
		statusOptions,
		columns
	} from '@/structure/overview.js';

	import {
		types
	} from '@/structure/common.js';

	export default {
		name: "User",
		components: {
			Treeselect
		},
		data() {
			return {
				// 遮罩层
				loading: false,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 查询参数
				queryParams: {
					type: "charger",
					status: "all",
					pageNum: 1,
					pageSize: 10,
				},
				statusMap: statusMap,
				statusOptions: statusOptions,
				types: types,
				columns: columns,
				dataList: [],

			};
		},
		watch: {
			// // 根据名称筛选部门树
			// deptName(val) {
			// 	this.$refs.tree.filter(val);
			// }
		},
		created() {
			this.getList();
			// this.getDeptTree();
			// this.getConfigKey("sys.user.initPassword").then(response => {
			// 	this.initPassword = response.msg;
			// });
		},
		methods: {
			/** 查询设备列表 */
			getList() {
				console.log("getList函数");
				this.loading = true;
				getList(this.queryParams).then(res => {
					// console.log("res=" + JSON.stringify(res));
					this.dataList = res.data.list;
					this.total = res.data.total;
					this.loading = false;
				}).catch(() => {
					this.loading = false;
				});
			},
			/** 查询按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 绑定按钮操作 */
			handleAdd() {
				// 在路由跳转时传递参数
				this.$router.push({
					path: '/overview/add', // 目标路径
					query: {
						types: this.types,
						btn: "绑定"
					}
				});
			},
			/** 修改按钮操作 */
			handleModify(row) {
				// 在路由跳转时传递参数
				this.$router.push({
					path: '/overview/modify', // 目标路径
					query: {
						sn: row.sn,
						name: row.name,
						address: row.address,
						types: this.types,
						btn: "修改"
					}
				});
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const sn = row.sn;
				let data = {
					type: this.queryParams.type,
					sn: sn
				}
				this.$modal.confirm('是否确认解绑SN码为"' + sn + '"的设备？').then(function() {
					return unbind(data);
				}).then(() => {
					this.getList();
					this.$modal.msgSuccess("解绑成功");
				}).catch(() => {});
			},
			/** 导出按钮操作 */
			handleExport() {
				this.download('system/user/export', {
					...this.queryParams
				}, `user_${new Date().getTime()}.xlsx`)
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.userId);
				this.single = selection.length != 1;
				this.multiple = !selection.length;
			},
		}
	};
</script>